<template>
	<view class="cancel" @click="handleClick">
		<view class="text" v-if="text">{{ text }}</view>
		<view class="placeholder" v-else>请选择取消原因</view>
		<image class="right-icon" src="@/static/image/right.png"></image>
	</view>
	<up-popup :show="show" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content">
				<view class="title">
					取消原因
				</view>
				<picker-view class="picker-view" :value="cause" @change="handleChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in causes" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
				<view class="popup-bottom">
					<view class="">
						<up-button @click="show = false" type="info" text="取消"></up-button>
					</view>
					<view class="">
						<up-button @click="handleSumbit" type="primary" text="确定"></up-button>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import trip from '@/api/trip.js'
	const customStyle = {
		width: '156rpx',
		borderRadius: '12rpx !important'
	}
	const handleClick = async () => {
		const { status, info, data } = await trip.getSysParam()
		if(status == 1) {
			show.value = true
			const now_role = uni.getStorageSync('userInfo').now_role
			if(now_role == 1) {
				causes.value = data.user_cancel_reason
			} else {
				causes.value = data.driver_cancel_reason
			}
		}
	}
	const show = ref(false)
	const text = ref('')
	const cause = ref([0])
	const causes = ref([])
	const handleChange = (e) => {
		console.log(e);
		cause.value = e.detail.value
	}
	const emits = defineEmits(['change'])
	const handleSumbit = () => {
		show.value = false
		text.value = causes.value[cause.value[0]].name
		emits('change', causes.value[cause.value[0]].id)
	}
</script>

<style lang="scss" scoped>
	.placeholder {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #A6A1A1;
		line-height: 33rpx;
	}
	.cancel {
		display: flex;
		align-items: center;
		
	}
</style>